<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>04-invalidArticleList</title>
	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.2.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/containerWrapping.css">
</head>
<body>
	<div class="container container-wrapping">
		<h3>失效物品记录：</h3>
		<hr><br>
		<div class="searchHeader">
			<form class="form-inline">
				<label class="my-1 mr-2" for="forCategory">物品类别 : </label>
			  <select class="custom-select my-1 mr-lg-5" id="forCategory">
			    <option selected>请选择...</option>
			    <option value="1">卡片</option>
			    <option value="2">钥匙</option>
			    <option value="3">电子设备</option>
			  </select>
			</form>
		</div><!-- classifySelect -->
		<br>
		<!-- 展示记录 -->
		<div class="recordListTable table-responsive">
			<table class="table table-hover text-center">
				<thead>
			    <tr class="">
			      <th scope="col">#</th>
			      <th scope="col">物品</th>
			      <th scope="col">详情</th>
			      <th scope="col">操作</th>
			    </tr>					
				</thead>
				<tbody>
			    <tr>
			      <th scope="row">1</th>
			      <td>钥匙</td>
			      <td><a href="invalidArticleListDetail.html" class="alert-link">详情</a></td>
			      <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
			    </tr>				    
			    <tr>
			      <th scope="row">2</th>
			      <td>钥匙</td>
			      <td><a href="invalidArticleListDetail.html" class="alert-link">详情</a></td>
			      <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
			    </tr>
					<tr>
			      <th scope="row">3</th>
			      <td>钥匙</td>
			      <td><a href="invalidArticleListDetail.html" class="alert-link">详情</a></td>
			      <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
			    </tr>				
				</tbody>
			</table>

			<br>
			<!-- 分页显示 -->
			<nav aria-label="Page navigation example">
			  <ul class="pagination justify-content-end">
			    <li class="page-item">
			     	<a class="page-link" href="#" aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    <li class="page-item active"><a class="page-link" href="#">1</a></li>
			    <li class="page-item"><a class="page-link" href="#">2</a></li>
			    <li class="page-item"><a class="page-link" href="#">3</a></li>
			    <li class="page-item">
			      <a class="page-link" href="#" aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li>
			  </ul>
			</nav>
		</div> <!-- recordListTable table-responsive -->
	</div><!-- container invalidArticleList -->

	<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../../bootstrap-4.2.1/js/bootstrap.min.js"></script>
</body>
</html>